<template>
    <div class="todoHead">
        <h3>ToDos</h3>
        <input type="checkbox" v-model="isAll">
        <input type="text" placeholder="记录待完成任务-回车确认" id='inp' v-model="name" @keyup.enter="addFn">
    </div>
</template>

<script>
    export default {
        props:['list'],
        data(){
            return {
                name: '',
                isCheck: false
            }
        },
        methods:{
            // 增添新任务
            addFn(){
                if(this.name.trim().length === 0){
                    alert('任务内容不能为空')
                    return
                }
                this.$emit('newTask',this.name)
                this.name = ''
            }      
        },
        computed:{
            isAll:{
                // 计算全选
                set(checked){
                    this.list.forEach((item)=>{
                        item.isCheck = checked
                    })
                },
                get(){
                    return this.list.length!== 0 && this.list.every((item)=>item.isCheck === true)

                }
            }
        }
    }
</script>

<style scoped>
.todoHead{
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 2px solid #000;
}
.todoHead h3{
    text-align: center;
    color: rgb(11, 144, 233);
    font-size: 30px;
}
input{

    margin-left: 10px;
}
#inp{
    border: none;
    outline: none;
    font-size: 22px;
}
/* 设置提示文大小 */
#inp::placeholder{
    font-style: italic;
    font-size: 22px;
}
</style>